<template>
   <div>
      <div>
        <span>{{user.id}}</span>
        <span>{{user.name}}</span>
        <span>
            <input type="text" v-model="user.score" v-if="user.edit" ref="scoreInput">
            <span v-if="!user.edit">{{user.score}}</span>
        </span>
        <span>
            <button @click="edit">编辑</button>
            <button @click="confirm">确认</button>
        </span>
      </div>
   </div>
</template>

<script>
export default {
    data(){
        return{
            user:{
                id:'1001',
                name:'张三',
                score:80,
                edit:false
            }
        }
    },
    methods:{
        confirm(){
             this.user.edit=false
        },
        async edit(){
           this.user.edit=true 
           await this.$nextTick()
           this.$refs.scoreInput.focus()
        }
    }
}
</script>

<style>

</style>